<template>
  <a-modal
    :visible="visible"
    title="查看明细"
    :width="700"
    :confirmLoading="confirmLoading"
    @cancel="() => { $emit('cancel') }"
  >
    <a-tabs defaultActiveKey="1">
      <a-tab-pane tab="课程基本信息" key="1">
        <detail-list>
          <detail-list-item term="课程代码">{{ courseInfo.kch }}&emsp;</detail-list-item>
          <detail-list-item term="课程中文名">{{ courseInfo.kcmc }}&emsp;</detail-list-item>
          <detail-list-item term="课程英文名">{{ courseInfo.kcywmc }}&emsp;</detail-list-item>
          <detail-list-item term="所属单位">{{ courseInfo.ssyxmc }}&emsp;</detail-list-item>
          <detail-list-item term="课程层次">{{ courseInfo.kcccmc }}&emsp;</detail-list-item>
          <detail-list-item term="课程类别">{{ courseInfo.kclbmc }}&emsp;</detail-list-item>
          <detail-list-item term="授课方式">{{ courseInfo.skfsmc}}&emsp;</detail-list-item>
          <detail-list-item term="考试方式">{{ courseInfo.ksfsmc }}&emsp;</detail-list-item>
          <detail-list-item term="学分">{{ courseInfo.xf }}&emsp;</detail-list-item>
          <detail-list-item term="学时">{{ courseInfo.zxs }}&emsp;</detail-list-item>
        </detail-list>
      </a-tab-pane>
      <a-tab-pane tab="课程简介" key="2">
        <!-- <div v-html="courseInfo.kcjj && decodeURI(String(courseInfo.kcjj).replace(/%/g, '%25'))"></div> -->
        <div v-html="decodeString(courseInfo.kcjj)"></div>
        <!-- <div v-html="decodeString(courseInfo.kcjj)"></div> -->
      </a-tab-pane>
      <a-tab-pane tab="教学大纲" key="3">
        <div v-html="decodeString(courseInfo.jxdg)"></div>
        <!-- <div v-html="courseInfo.jxdg && decodeURI(courseInfo.jxdg)"></div> -->
        <!-- {{ courseInfo.jxdg && decodeURI(courseInfo.jxdg) }} -->
        <!-- {{ courseInfo.jxdg }} -->
      </a-tab-pane>
    </a-tabs>
    <a-button slot="footer" type="primary" @click="() => { $emit('cancel') }">关闭</a-button>
  </a-modal>
</template>

<script>
import DetailList from '~/tool/DetailList'
const DetailListItem = DetailList.Item

export default {
  props: {
    visible: Boolean,
    courseInfo: {
      type: Object,
      default () {
        return {}
      }
    },
    confirmLoading: Boolean
  },
  components: {
    DetailList,
    DetailListItem
  },
  methods: {
    decodeString (string) {
      if (string) {
        var temp = "";
        if(string.length == 0) return "";
        temp = string.replace(/&amp;/g,"&");
        temp = temp.replace(/&lt;/g,"<");
        temp = temp.replace(/&gt;/g,">");
        temp = temp.replace(/&nbsp;/g," ");
        temp = temp.replace(/&#39;/g,"\'");
        temp = temp.replace(/&quot;/g,"\"");
        return temp;  
      }
    }
  }
}
</script>

<style>

</style>
